/**
 * Flex layout attribute
 * HTML layout helper based on CSS flexbox specification.
 * 
 * VERSION: v1.0.3
 * DATE:    2016-06-21
 * URL:     http://progressivered.com/fla/
 * AUTHOR:  Stefan Kovac | stef@progressivered.com | http://progressivered.com/
 * LICENSE: MIT 
 */

@charset "UTF-8";
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/*
==========================================================
                  GENERAL DEFINITIONS
==========================================================
*/
[layout] {
    display: -ms-flexbox;
    display: flex;
}

[layout*="row"],
[layout*="column"] {
    width: 100%;
    max-width: 100%;
}

[layout^="row"] {
    -ms-flex-direction: row;
    flex-direction: row;
}

[layout^="column"] {
    -ms-flex-direction: column;
    flex-direction: column;
}

[layout*="row"][layout*="reverse"] {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

[layout*="column"][layout*="reverse"] {
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

[layout*="rows"],
[layout*="columns"] {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

[layout="none"] {
    -ms-flex: none;
    flex: none;
}

/*
==========================================================
                  MAIN AXIS ALIGNMENT
==========================================================
*/
[layout*="column"][layout*="top-"],
[layout*="row"][layout*="-left"] {
    -ms-flex-pack: start;
    justify-content: flex-start;
}

[layout~="centered"],
[layout*="column"][layout*="center-"],
[layout*="row"][layout*="-center"] {
    -ms-flex-pack: center;
    justify-content: center;
}

[layout*="column"][layout*="bottom-"],
[layout*="row"][layout*="-right"] {
    -ms-flex-pack: end;
    justify-content: flex-end;
}

[layout*="column"][layout*="spread-"],
[layout*="row"][layout*="-spread"] {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

[layout*="column"][layout*="justify-"],
[layout*="row"][layout*="-justify"] {
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/*
==========================================================
                CROSS AXIS ALIGNMENT
==========================================================
*/
[layout*="column"][layout*="-left"],
[layout*="row"][layout*="top-"] {
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
}

[layout~="centered"],
[layout*="column"][layout*="-center"],
[layout*="row"][layout*="center-"] {
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
}

[layout*="column"][layout*="-right"],
[layout*="row"][layout*="bottom-"] {
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end;
}

[layout*="column"][layout*="-stretch"],
[layout*="row"][layout*="stretch-"] {
    -ms-flex-align: stretch;
    -ms-grid-row-align: stretch;
    align-items: stretch;
}

/*
==========================================================
               MULTI-LINE ALIGNMENT
==========================================================
*/
[layout*="rows"][layout*="top-"],
[layout*="columns"][layout*="-left"] {
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

[layout*="rows"][layout*="bottom-"],
[layout*="columns"][layout*="-right"] {
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

[layout*="rows"][layout*="center-"],
[layout*="columns"][layout*="-center"] {
    -ms-flex-line-pack: center;
    align-content: center;
}

[layout*="rows"][layout*="justify-"],
[layout*="columns"][layout*="-justify"] {
    -ms-flex-line-pack: justify;
    align-content: space-between;
}

[layout*="rows"][layout*="spread-"],
[layout*="columns"][layout*="-spread"] {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

[layout*="rows"][layout*="stretch-"],
[layout*="columns"][layout*="-stretch"] {
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

/*
==========================================================
                       IE10+ HACKS
==========================================================
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    [layout*="column"]:not([layout*="row"]) > * {
        max-width: auto;
    }
    [layout*="column"][self*="top"] {
        height: auto !important;
    }
    [self~="size-"] > * {
        height: auto;
    }
}

/*
==========================================================
                    SELF ALIGNMENT
==========================================================
*/
[layout*="column"]:not([layout*="row"]) [self*="left"],
[layout*="row"]:not([layout*="column"]) [self*="top"] {
    -ms-flex-item-align: start;
    align-self: flex-start;
}

[self~="center"] {
    -ms-flex-item-align: center;
    align-self: center;
}

[layout*="column"]:not([layout*="row"]) [self*="right"],
[layout*="row"]:not([layout*="column"]) [self*="bottom"] {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

[self*="stretch"] {
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

/* ALIGN VIA MARGINS
========================================================== */
/* Container: */
[layout][self*="center"] {
    margin-left: auto;
    margin-right: auto;
}

[layout][self*="right"] {
    margin-right: 0;
}

[layout][self*="left"] {
    margin-left: 0;
}

/* Items: */
[layout*="column"] [self*="bottom"] {
    margin-top: auto;
}

[layout*="column"] [self*="top"] {
    margin-bottom: auto;
}

[layout*="row"] [self*="left"] {
    margin-right: auto;
}

[layout*="row"] [self*="right"] {
    margin-left: auto;
}

/*
==========================================================
                      SELF SIZE
==========================================================
*/
/* Relative size */
[self~="size-1of10"] {
    width: 10%;
}
[self~="size-1of8"] {
    width: 12.5%;
}
[self~="size-1of7"] {
    width: 14.3%;
}
[self~="size-1of6"] {
    width: 16.7%;
}
[self~="size-1of5"] {
    width: 20%;
}

[self~="size-1of4"] {
    width: 25%;
}

[self~="size-1of3"] {
    width: 33.33333%;
}

[self~="size-2of5"] {
    width: 40%;
}

[self~="size-1of2"] {
    width: 50%;
}

[self~="size-3of5"] {
    width: 60%;
}

[self~="size-2of3"] {
    width: 66.6666%;
}

[self~="size-3of4"] {
    width: 75%;
}

[self~="size-4of5"] {
    width: 80%;
}

[self~="size-1of1"] {
    width: 100%;
}

/* Proportional size*/
[layout*="row"][layout*="-stretch"] > *:not([self*="size-"]),
[layout*="column"][layout*="stretch-"] > *:not([self*="size-"]),
[self~="size-x1"] {
    -ms-flex: 1 0 0% !important;
    flex: 1 0 0% !important;
}

[self~="size-x2"] {
    -ms-flex: 2 0 0% !important;
    flex: 2 0 0% !important;
}

[self~="size-x3"] {
    -ms-flex: 3 0 0% !important;
    flex: 3 0 0% !important;
}

[self~="size-x4"] {
    -ms-flex: 4 0 0% !important;
    flex: 4 0 0% !important;
}

[self~="size-x5"] {
    -ms-flex: 5 0 0% !important;
    flex: 5 0 0% !important;
}

[self~="size-x6"] {
    -ms-flex: 6 0 0% !important;
    flex: 6 0 0% !important;
}

[self~="size-x7"] {
    -ms-flex: 7 0 0% !important;
    flex: 7 0 0% !important;
}

[self~="size-x8"] {
    -ms-flex: 8 0 0% !important;
    flex: 8 0 0% !important;
}

[self~="size-x9"] {
    -ms-flex: 9 0 0% !important;
    flex: 9 0 0% !important;
}

[self*="size-auto"] {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

[self*="size-x0"] {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

/* Fixed max-width size */
[self~="size-xxlarge"] {
    max-width: 1440px;
    width: 100%;
}

[self~="size-xlarge"] {
    max-width: 1200px;
    width: 100%;
}

[self~="size-large"] {
    max-width: 960px;
    width: 100%;
}

[self~="size-larger"] {
    max-width: 840px;
    width: 100%;
}

[self~="size-medium"] {
    max-width: 720px;
    width: 100%;
}

[self~="size-smaller"] {
    max-width: 600px;
    width: 100%;
}

[self~="size-small"] {
    max-width: 480px;
    width: 100%;
}

[self~="size-xsmall"] {
    max-width: 360px;
    width: 100%;
}

[self~="size-xxsmall"] {
    max-width: 240px;
    width: 100%;
}

[self*="size-x"]:not([self*="small"]):not([self*="large"]) {
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

[self~="first"] {
    -ms-flex-order: -1;
    order: -1;
}

[self~="order-1"] {
    -ms-flex-order: 1;
    order: 1;
}

[self~="order-2"] {
    -ms-flex-order: 2;
    order: 2;
}

[self~="order-3"] {
    -ms-flex-order: 3;
    order: 3;
}

[self~="last"] {
    -ms-flex-order: 999;
    order: 999;
}

[layout*="column"]:not([layout*="row"]) > * {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

/* Optional additional features — (un)comment to include/exclude */
@media screen and (max-width: 64em) {
    [layout*="lg-row"] {
        -ms-flex-direction: row;
        flex-direction: row;
    }
    [layout*="lg-column"] {
        -ms-flex-direction: column;
        flex-direction: column;
    }
    [layout*="lg-rows"],
    [layout*="lg-columns"] {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 52em) {
    [layout*="md-row"] {
        -ms-flex-direction: row;
        flex-direction: row;
    }
    [layout*="md-column"] {
        -ms-flex-direction: column;
        flex-direction: column;
    }
    [layout*="md-rows"],
    [layout*="md-columns"] {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 40em) {
    [layout*="sm-row"] {
        -ms-flex-direction: row;
        flex-direction: row;
    }
    [layout*="sm-column"] {
        -ms-flex-direction: column;
        flex-direction: column;
    }
    [layout*="sm-rows"],
    [layout*="sm-columns"] {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 64em) {
    [self*="lg-full"] {
        -ms-flex: 1 1 100% !important;
        flex: 1 1 100% !important;
        width: 100%;
        max-width: 100%;
    }
    [self*="lg-half"] {
        -ms-flex: 1 1 50% !important;
        flex: 1 1 50% !important;
        width: 50%;
        max-width: 50%;
    }
    [self~="lg-first"] {
        -ms-flex-order: -1;
        order: -1;
    }
    [self~="lg-last"] {
        -ms-flex-order: 999;
        order: 999;
    }
    [self~="lg-hide"] {
        display: none;
    }
    [self~="lg-show"] {
        display: inherit;
    }
}

@media screen and (max-width: 52em) {
    [self*="md-full"] {
        -ms-flex: 1 1 100% !important;
        flex: 1 1 100% !important;
        width: 100%;
        max-width: 100%;
    }
    [self*="md-half"] {
        -ms-flex: 1 1 50% !important;
        flex: 1 1 50% !important;
        width: 50%;
        max-width: 50%;
    }
    [self~="md-first"] {
        -ms-flex-order: -1;
        order: -1;
    }
    [self~="md-last"] {
        -ms-flex-order: 999;
        order: 999;
    }
    [self~="md-hide"] {
        display: none;
    }
    [self~="md-show"] {
        display: inherit;
    }
}

@media screen and (max-width: 40em) {
    [self*="sm-full"] {
        -ms-flex: 1 1 100% !important;
        flex: 1 1 100% !important;
        width: 100%;
        max-width: 100%;
    }
    [self*="sm-half"] {
        -ms-flex: 1 1 50% !important;
        flex: 1 1 50% !important;
        width: 50%;
        max-width: 50%;
    }
    [self~="sm-first"] {
        -ms-flex-order: -1;
        order: -1;
    }
    [self~="sm-last"] {
        -ms-flex-order: 999;
        order: 999;
    }
    [self~="sm-hide"] {
        display: none;
    }
    [self~="sm-show"] {
        display: inherit;
    }
}

/*# sourceMappingURL=maps/flex-layout-attribute.css.map */
